<template>


  <el-main>
    <h1 class="font-weight-bold">Article</h1>
    <el-row :gutter="20" >
      <el-col :span="3" > <p></p></el-col>
        <el-col :span="6" :xs="24" v-for="item in listData" key="item.blogId">
          <article class="card"  style="background-color:#eeeeee;min-height: 300px">

            <img class="card-img-top mb-2" v-if="item.blogCover!=''" :src="item.blogCover" alt="Card image">
          <!--    如果没有封面就给一个默认的  -->
            <img class="card-img-top mb-2" v-else :src="require('@/assets/img.png')" alt="Card image">

            <div class="card-body">
              <a class="card-title display-4" style="color: #4c0ab8" :href="'/blog/'+item.blogId" >
                {{ item.blogTitle }}
              </a>

              <p>
                {{ item.blogCreateTime| dateYMDHMSFormat  }}
              </p>

            </div>
          </article>
        </el-col>
      <el-col :span="3" > <p></p></el-col>
    </el-row>

  </el-main>



</template>

<script>
import { blogsHome} from "@/api/blog";

export default {
  name: "blogPost",
  data() {
    return {
      listData: []
    }
  },
  created() {
    /*找到第一页就ok*/
    blogsHome().then(res => {
          this.listData = res.data.records;
        }
    ).catch(err => {
          console.error(err);
        }
    )
  }
}
</script>

<style scoped>

</style>
